import React, { MouseEventHandler, useState } from "react";
import { useComponentConfigStore } from "../../store/component-config";
import { Component, useComponetsStore } from "../../store/components";
import "./index.scss";
import HoverMask from "../HoverMask";
import SelectedMask from "../SelectedMask";

export default function EditArea() {
	const { components, curComponentId, setCurComponentId } = useComponetsStore();
	const { componentConfig } = useComponentConfigStore();

	const renderComponents = (components: Component[]): React.ReactNode => {
		return components.map((component: Component) => {
			const config = componentConfig?.[component.name];
			if (!config?.dev) {
				return null;
			}
			return React.createElement(
				config.dev,
				{
					key: component.id,
					id: component.id,
					name: component.name,
                    styles:component.styles,
					...config.defaultProps,
					...component.props,
				},
				renderComponents(component.children || [])
			);
		});
	};

	const [hoverComponentId, setHoverComponentId] = useState<number>();

	const handleMouseOver: MouseEventHandler = (e) => {
		const path = e.nativeEvent.composedPath();
		for (let i = 0; i < path.length; i += 1) {
			const ele = path[i] as HTMLElement;
			const componentId = ele.dataset?.componentId;
			if (componentId) {
				setHoverComponentId(+componentId);
				return;
			}
		}
	};

	const handleClick: MouseEventHandler = (e) => {
		const path = e.nativeEvent.composedPath();
		for (let i = 0; i < path.length; i += 1) {
			const ele = path[i] as HTMLElement;
			const componentId = ele.dataset?.componentId;
			if (componentId) {
				setCurComponentId(+componentId);
				return;
			}
		}
	};

	return (
		<div
			className="edit-area"
			onMouseOver={handleMouseOver}
			onMouseLeave={() => setHoverComponentId(undefined)}
			onClick={handleClick}
		>
			{renderComponents(components)}
			{hoverComponentId && hoverComponentId !== curComponentId && (
				<HoverMask
					portalWrapperClassName="portal-wrapper"
					containerClassName="edit-area"
					componentId={hoverComponentId}
				/>
			)}
			{curComponentId && (
				<SelectedMask
					portalWrapperClassName="portal-wrapper"
					containerClassName="edit-area"
					componentId={curComponentId}
				/>
			)}
			<div className="portal-wrapper"></div>
		</div>
	);
}
